import { Button, Map } from '@tarojs/components'
import { useState, useRef } from 'react'
import { useLoad, getLocation } from '@tarojs/taro'
import IpxFooter, { IInit } from '@/components/IpxFooter'

import './index.scss'

export default function Index() {
  const [longitude, setLongitude] = useState(0)
  const [latitude, setLatitude] = useState(0)

  const ipxRef = useRef<IInit>(null)

  useLoad(async () => {
    // 1. 获取用户的地理位置
    const resp = await getLocation({
      type: 'gcj02',
    })
    setLongitude(resp.longitude)
    setLatitude(resp.latitude)

    // 2. 获取 ipxRef 的值
    console.log('ipxRef', ipxRef.current)

    setTimeout(() => {
      ipxRef.current?.changeBottom(100)
    }, 2000)
  })

  return (
    <>
      <Map id='map' longitude={longitude} latitude={latitude}></Map>
      <IpxFooter ref={ipxRef}>
        <Button>发布</Button>
      </IpxFooter>
    </>
  )
}
